{__NOLAYOUT__}
<link rel="stylesheet" href="/static/plugins/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/plugins/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/plugins/AdminLTE/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="/static/plugins/AdminLTE/dist/css/skins/_all-skins.min.css">
<style>
.border{border:1px solid #eee;}
.inputheight{height: 37px}
.nopad{margin:0;padding:0}
.nospec,.havespecnone{height:220px;line-height: 220px;}
.havespec{line-height: 220px;padding:15px;}
.havespec a{margin:10px 15px;display: block}
</style>
<div class="box box-body" style="height: 300px">	
	<div class="row">
		<input type="hidden" id="specid"><input type="hidden" id="specname">

		<div class="col-xs-4 text-center" style="padding-right:5px">
			<div>
				<div class="border"><h5 style="font-weight: 700">规格属性【单选】</h5></div>
				
		         <div class="list-group">
		         	{volist name="spec" id="vo"}
					  <a href="javascript:;" class="list-group-item" data-id="{$vo.id}">{$vo.name}</a>
					{/volist}
				</div>
			</div>
			
		</div>
		<div class="col-xs-8 text-center" style="padding-left:5px">
			<div class="row nopad">
				<div class="col-xs-4 border nopad"><h5 style="font-weight: 700">规格值</h5></div>
				<div class="col-xs-8 nopad"><input class="form-control inputheight" id="add-spec-tags" type="text" autocomplete="off" placeholder="新增规格名,按回车确认添加"></div>

			</div>
			<div class="border nospec" >
				请选择左侧规格列表
			</div>
			<div class="border havespecnone" style="display: none">
				<div style="display: flex;flex-wrap: wrap;" class="havespec text-center">
					请选择左侧规格列表
				</div>
				
			</div>
		</div>
	</div>
</div>
<script src="/static/plugins/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/static/plugins/layer/layer.js"></script>
<script src="/static/plugins/siyu-ui.js"></script>
<script>
		let isInputVal = false
		var specs_id,specs_name;
		$('.list-group-item').click(function(){
		    specs_id = $(this).data('id');
		    specs_name = $(this).html();
			isInputVal = true;
			var config = {
                    url: '',
                    type: 'POST',
                    data:{'id':specs_id},
                    success: function(result) {
                    	
                    	if(result.data == ''){
                    		$('#specid').val('');
                    		$('.havespec').html('暂无数据');
                    		$('.nospec').css('display','none');
                			$('.havespecnone').css('display','block');
                    	}else{
                    		let html = ''
			                result.data.forEach(function (item) {
			                    html += '<a href="javascript:;" class="label label-danger del-child-tags"  data-specs-value-id="'+item.id+'"> <b>' + item.name + '</b><i class="fa fa-trash-o" style="padding-left: 12px;"></i></a>';
			                })
			                $('#specname').val(specs_name);
                    		$('#specid').val(specs_id);
                			$('.havespec').html(html);
                			$('.nospec').css('display','none');
                			$('.havespecnone').css('display','block');
                    	}
                       
                    }
                };
                $.ajax(config)
		})

		$('#add-spec-tags').on('keypress', function (e) {
            if (!isInputVal) {
                $.modal.alertWarning('请选择左侧规格名称');
                return false;
            }else{
            	if (e.which === 13) {
                let tags = $(this).val();
                var config = {
                    url: "{:url('add_specs_value')}",
                    type: 'POST',
                    data:{'id':specs_id,'name':tags},
                    success: function(result) {
                    	if(result.code == 1){
                    		let html = ''
			                result.data.forEach(function (item) {
			                    html += '<a href="javascript:;" class="label label-danger del-child-tags"  data-specs-value-id="'+item.id+'"> <b>' + item.name + '</b><i class="fa fa-trash-o" style="padding-left: 12px;"></i></a>';
			                })
                			$('.havespec').html(html);
                            $('#add-spec-tags').val('');

                    		
                    	}else{
                    		$.modal.alertWarning('添加失败'+result.msg);
                    	}
                       
                    }
           		};
            	$.ajax(config)
            	}
            }
        })


        $('html').on('click', '.del-child-tags', function () {
        	let specsvalueid = $(this).data('specs-value-id');
        	var config = {
                    url: "{:url('delete_specs_value')}",
                    type: 'POST',
                    data:{'id':specsvalueid},
                    success: function(result) {
                    	if(result.code == 1){
                    		let html = ''
			                result.data.forEach(function (item) {
			                    html += '<a href="javascript:;" class="label label-danger del-child-tags"  data-specs-value-id="'+item.id+'"> <b>' + item.name + '</b><i class="fa fa-trash-o" style="padding-left: 12px;"></i></a>';
			                })
                			$('.havespec').html(html);
                    	}else{
                    		$.modal.alertWarning('删除失败'+result.msg);
                    	}
                       
                    }
           		};
            $.ajax(config)  
        })

	
</script>